<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="sports_running">
    <header class="sports-running-header">
        户外跑
        <p>运动中</p>
    </header>
    <main class="sports-running-main">
        <!-- 消耗公里 -->
        <div class="total">
            <span id="totalMeter"></span>公里
        </div>
        <!-- gps -->
        <div class="gps">
            <span>GPS信号度低，数据精准度低</span>
            <span class="iconfont icon-dingwei"></span>
        </div>
        <!-- 仪表盘 -->
        <div class="panel">
            <div class="speed">
                <span class="iconfont icon-sudu"></span>
                配速
                <span id="speed">--</span>
            </div>
            <div class="time">
                <span class="iconfont icon-shijian"></span>
                用时
                <span id="time">--</span>
            </div>
            <div class="calorie">
                <span class="iconfont icon-rexiao"></span>
                千卡
                <span id="calorie">--</span>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="btns">
            <div class="start">
                <span class="iconfont icon-bofang"></span>
                继续
            </div>
            <div class="pause">
                <span class="iconfont icon-24gf-pauseCircle"></span>
                暂停
            </div>
            <div class="close">
                <span class="iconfont icon-guanji-"></span>
                结束
            </div>
        </div>
    </main>
</body>

</html>